<template>
  <div class="inspect-page">
    <!-- 面包屑 -->
    <Breadcrumb separator=">" class="panel-bread">
      <BreadcrumbItem href="/home/inspection/log-panel">巡检日志</BreadcrumbItem>
      <BreadcrumbItem :href="'/home/inspection/log-type?typeId=' + $route.query.typeId + '&typeName=' + $route.query.typeName">{{$route.query.typeName}}</BreadcrumbItem>
      <BreadcrumbItem :href="'/home/inspection/log?typeId=' + $route.query.typeId + '&typeName=' + $route.query.typeName + '&inspectRecordId=' + $route.query.inspectRecordId">巡检详情</BreadcrumbItem>
      <BreadcrumbItem>节点详情</BreadcrumbItem>
    </Breadcrumb>

    <!-- 巡检类型信息 -->
    <Card class="inspect-type" v-if="!loading">
      <Row type="flex">
        <Col class="inspect-type-img">
          <img src="/images/inspect-object.png" />
        </Col>
        <Col class="flex-1">
          <h4>巡检类型：{{inspectLog.inspectTypeName}}</h4>
          <p class="inspect-type-detail">
            <span>巡检对象： {{inspectLog.inspectObjectName}}</span>
            <span>巡检结果：
              <span class="color-green" v-if="inspectLog.inspectObjectResult === '正常'">{{inspectLog.inspectObjectResult}}</span>
              <span class="color-red" v-else>{{inspectLog.inspectObjectResult}}</span>
            </span>
            <span>巡检时间：{{inspectLog.inspectTime}}</span>
          </p>
        </Col>
      </Row>
    </Card>

    <!-- 巡检日志表格 -->
    <Card class="inspect-table" v-if="!loading">
      <div class="inspect-table-options">
        <a v-for="(option, optionIndex) in options" :class="{'active': optionIndex === selectOption}" :key="optionIndex" @click="switchOption(optionIndex)">{{option}}</a>
      </div>
      <Table :columns="columns" :data="inspectLogData"></Table>
    </Card>

    <Spin v-if="loading"></Spin>

  </div>
</template>
<script type="text/javascript">
import Fetch from '@/api/request'
export default {
  name: 'InspectLogNode',
  data() {
    return {
      inspectLog: {},
      columns: [{
        type: 'index',
        width: '60px',
        align: 'center'
      }, {
        title: '巡检项描述',
        key: 'inspectItemDesc',
        align: 'center'
      }, {
        title: '巡检项阈值',
        key: 'inspectItemThresholds',
        align: 'center',
        width: '14%'
      }, {
        title: '巡检项实际值',
        key: 'inspectItemActualValue',
        align: 'center',
        width: '14%'
      }, {
        title: '巡检项评分权重',
        key: 'inspectItemWeight',
        align: 'center',
        width: '14%'
      }, {
        title: '巡检项结果',
        width: '14%',
        align: 'center',
        render: (h, params) => {
          if (params.row.inspectItemResult === '正常') {
            return h('Tag', {
              props: {
                color: 'green'
              }
            }, '正常')
          } else if (params.row.inspectItemResult === '异常') {
            return h('Tag', {
              props: {
                color: 'red'
              }
            }, '异常')
          }
        }
      }],
      inspectLogData: [],
      options: ['总量', '正常', '异常'],
      selectOption: 0,
      inspectObjectId: '',
      inspectLogMeta: [],
      loading: true
    }
  },
  mounted() {
    this.inspectObjectId = this.$route.query.inspectObjectId
    this.getData()
  },
  methods: {
    // 切换日志查询条件
    switchOption(index) {
      this.selectOption = index
      if (index === 0) { // 总量
        this.inspectLogData = this.inspectLogMeta
      } else if (index === 1) { // 正常
        this.inspectLogData = this.inspectLogMeta.filter((log) => {
          return log.inspectItemResult === '正常'
        })
      } else if (index === 2) { // 异常
        this.inspectLogData = this.inspectLogMeta.filter((log) => {
          return log.inspectItemResult === '异常'
        })
      }
    },
    // 获取日志数据
    getData() {
      this.loading = true
      Fetch.get({
        url: '/api/inspect/object/searchObject',
        params: {inspectObjectId: this.inspectObjectId},
        done: () => {
          this.loading = false
        }
      }).then((res) => {
        this.inspectLog = res.data
        if (res.data && res.data.inspectItemInfoList) {
          this.inspectLogData = res.data.inspectItemInfoList
          this.inspectLogMeta = res.data.inspectItemInfoList
        }
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.inspect-page {
  background-color: #fff;
  padding: 15px 15px 60px 15px;
}
.inspect-type {
  margin-top: 20px;
  .inspect-type-img {
    padding-right: 10px;
    img {
      width: 46px;
      height: 46px;
      border-radius: 50%;
    }
  }
  .inspect-type-detail {
    > span {
      color: #999;
      margin-right: 20px;
      font-size: 14px;
    }
  }
}
.inspect-table {
  margin-top: 20px;
  .inspect-table-options {
    padding-bottom: 15px;
    a {
      display: inline-block;
      position: relative;
      line-height: 14px;
      padding: 0 10px;
      border-left: 1px solid #999;
      &:first-child {
        margin-left: -10px;
        border-left: 1px solid transparent;
      }
      &.active {
        color: #2d8cf0;
      }
    }
  }
}
.panel-bread {
  margin-top: 5px;
  margin-bottom: 15px;
  padding: 6px 15px 6px 0;
  border-bottom: 1px solid #eee;
}
.inspect-page /deep/ {
    .ivu-spin {
      margin: auto;
      padding: 60px;
      .ivu-spin-main {
        display: inline-block;
      }
    }
  }
</style>
